<template>
  <div class="tabs">
      <div class="tab" @click="turn(item.path)" v-for="(item,index) in tabs" :key="index">
<!--        <img :src="item.img" class="img" alt="">-->
       <div class="img">
         <span class="iconfont" :class="item.icon"></span>
       </div>
        <span class="name">{{item.name}}</span>
      </div>
  </div>
</template>

<script>
export default {
  methods: {
    turn (path) {
      this.$router.push(path)
    }
  },
  props: {
    tabs: Array
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="stylus">
  .tabs
    background-color #F5F4F7
    display flex
    flex-direction row
    justify-content space-between
    .tab
      flex 1
      display flex
      flex-direction column
      justify-content space-between
      align-items center
      .img
        display flex
        align-items center
        justify-content center
        width 1.28rem
        height 1.28rem
        border-radius 50%
        background: linear-gradient(31deg, #F66A36, #FDB816);
        .iconfont
           font-size 21px
           color white
      .name
        margin-top 0.25rem
        dpr-font(14px)
        font-family:PingFang SC;
        font-weight:300;
        color:rgba(26,26,48,1);
</style>
